<template>
    <div class="dashboard-container">
        <div style="display: flex; flex-direction: row;">
            <el-button size="middle" type="primary" @click="onExcuteClick" v-loading="isExcuting">执行</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%" v-loading="isLoading">
            <el-table-column prop="id" label="ID" width="120">
            </el-table-column>
            <el-table-column prop="identifier" label="唯一标识" width="200">
            </el-table-column>
            <el-table-column prop="token" label="Token" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="score_update" label="ScoreUpdate" width="360">
            </el-table-column>
            <el-table-column prop="score" label="Score" width="120">
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import * as XLSX from 'xlsx';
const axios = require('axios');
export default {
    name: 'HamsterKombat',
    data() {
        return {
            isLoading: false,
            tableData: [],
            isExcuting: false
        }
    },
    mounted() {
        this.refreshAccounts()
        this.refreshExcuteStatus()
        // 6分钟刷新一次
        this.timer = setInterval(() => {
            this.refreshAccounts()
            this.refreshExcuteStatus()
        }, 1000 * 300);
    },
    destroyed() {
        clearInterval(this.timer)
    },
    methods: {
        refreshAccounts() {
            this.isLoading = true
            this.request({
                url: '/api/hamsterkombat/accounts',
                method: 'get',
            }).then(resp => {
                const data = resp.data;
                this.tableData = data
            }).finally(() => {
                this.isLoading = false
            })
        },
        refreshExcuteStatus() {
            this.request({
                url: '/api/hamsterkombat/excute',
                method: 'get',
            }).then(resp => {
                this.isExcuting = resp.data
            })
        },
        readFile(file) {
            //文件读取
            return new Promise(resolve => {
                let reader = new FileReader();
                reader.readAsBinaryString(file); //以二进制的方式读取
                reader.onload = ev => {
                    resolve(ev.target.result);
                };
            });
        },
        async createWalletFile(file) {
            let data = await this.readFile(file);
            let workbook = XLSX.read(data, { type: "binary", cellDates: true }); //解析二进制格式数据
            let worksheet = workbook.Sheets[workbook.SheetNames[0]]; //获取第一个Sheet
            let result = XLSX.utils.sheet_to_json(worksheet); //json数据格式
            return result
        },
        async beforeUpload(file) {
            let result = await this.createWalletFile(file)
            for (let index = 0; index < result.length; index++) {
                const element = result[index];
                let params = element.params;
                if (params == null || params.length == 0) {
                    continue
                }
                if (params.startsWith('src=')) {
                    params = params.split("#tgWebAppData=")[1]
                    params = params.split("&tgWebAppVersion")[0]
                    params = decodeURIComponent(params)
                    element.params = params
                }
            }

            this.submitTableData(result)
            return false
        },
        submitTableData(tableData) {
            this.isLoading = true
            this.request({
                url: '/api/hamsterkombat/setup',
                method: 'post',
                data: tableData
            }).then((resp) => {
                const data = resp.data;
                this.tableData = data
            }).finally(() => {
                this.isLoading = false
            });
        },
        async onExcuteClick() {
            this.request({
                url: '/api/hamsterkombat/excute',
                method: 'post',
            }).then(resp => {
                this.isExcuting = resp.data
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.dashboard {
    &-container {
        margin: 30px;
    }

    &-text {
        font-size: 30px;
        line-height: 46px;
    }
}
</style>
\
